<template>
  <div class="Select">
    <el-select
      v-model="value"
      :placeholder="placeholder"
      clearable
      filterable
      :disabled="disabled"
      @change="$emit('update:value', value)"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'Select',
  props: {
    options: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: ''
    },
    default: {
      type: String | Number,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      value: ''
    }
  },
  watch: {
    default: {
      immediate: true,
      deep: true,
      handler(val) {
        this.value = val
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.Select {
  width: 100%;

  .el-select {
    width: 100%;
  }
}
</style>